<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <div class="filter-item">
        <el-select style="margin-left:10px;" v-model="listQuery.param.userId" placeholder="请选择" clearable>
          <el-option v-for="item in userRole" :key="item.id" :label="item.userName" :value="item.id">
            <span style="float: left">{{ item.userName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.roles }}</span>
          </el-option>
        </el-select>
        <el-date-picker style="margin-left:10px;" v-model="queryDateTime" type="daterange" :clearable="false" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>

        <el-button type="primary" icon="el-icon-search" @click="handleFilter" style="margin-left:10px;">
          查询
        </el-button>
      </div>
    </div>

    <div>
      <el-table :data="userCheckInfos" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.userCheckData" style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="scope">
                  <el-table :data="scope.row.detail" style="width: 100%">
                    <el-table-column v-if="false" align="center" label="" prop="id" />
                    <el-table-column align="center" label="工种" prop="workerType" />
                    <el-table-column align="center" label="人数" prop="numberOfPeople" />
                    <el-table-column align="center" label="单价" prop='price' />
                    <el-table-column align="center" label="总价">
                      <template slot-scope="detailScope">
                        {{(detailScope.row.numberOfPeople * detailScope.row.price).toFixed(2)}}
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column align="center" label="打卡日期">
                <template slot-scope="prop">
                  <span>{{prop.row.belongsDate | dateformat('YYYY-MM-DD') }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="上班打卡时间">
                <template slot-scope="prop">
                  <span>{{prop.row.clockInDate | dateformat }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="上班打卡照片">
                <template slot-scope="prop">
                  <el-image v-if="prop.row.clockInPicUrl" style="width: 50px; height: 50px" :src="prop.row.clockInPicUrl | userCheckInfoMinImgUrl" :preview-src-list="getImgList(props.row.userCheckData, prop.$index, 'clockIn')">
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column align="center" label="下班打卡时间">
                <template slot-scope="prop">
                  <span>{{prop.row.clockOutDate | dateformat }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="下班打卡照片">
                <template slot-scope="prop">
                  <el-image v-if="prop.row.clockOutPicUrl" style="width: 50px; height: 50px" :src="prop.row.clockOutPicUrl | userCheckInfoMinImgUrl" :preview-src-list="getImgList(props.row.userCheckData, prop.$index, 'clockOut')"></el-image>
                </template>
              </el-table-column>

              <el-table-column align="center" label="总价" prop="totalPrice" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="账号" prop="userName">
        </el-table-column>
        <el-table-column label="角色" prop="roles">
        </el-table-column>
        <el-table-column label="打卡天数" prop="totalCount">
        </el-table-column>
        <el-table-column label="打卡次数" prop="checkCount">
        </el-table-column>

        <el-table-column align="center" label="总价" prop="totalPrice">
        </el-table-column>
      </el-table>
    </div>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[20, 50, 100]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="userCheckTotal">
    </el-pagination>
  </div>
</template>
<script>
import { getAllUser } from '@/api/user'
import { getAllUserCheckInfo } from '@/api/userCheckInfo'
export default {
  name: 'workAttendance',
  data() {
    return {
      userRole: [],
      userCheckInfos: [],
      queryDateTime: [],
      userQuery: {
        page: 1,
        size: 2147483640,
        param: {}
      },
      listQuery: {
        page: 1,
        size: 20,
        param: {
          userId: undefined,
          startDate: undefined,
          endDate: undefined
        }
      },
      imgUrlPrefix: process.env.VUE_APP_API_HOST + "/api/UserCheckInfo/",
      userCheckTotal: 0,
      successCode: 20000,

    }
  },
  created() {
    let now = new Date();
    this.queryDateTime[0] = new Date(now.getFullYear(), now.getMonth(), 1);
    this.queryDateTime[1] = new Date(now.getFullYear(), now.getMonth() + 1, 0);
    this.getAllUserRoleInfo();
    this.handleFilter();
  },
  methods: {
    getImgList(userCheckData, index, type) {
      var imgLists = [];

      for (let i = index; i < userCheckData.length; i++) {
        if (!(i === index && type === "clockOut") && userCheckData[i].clockInPicUrl) {
          imgLists.push(this.$options.filters['userCheckInfoImgUrl'](userCheckData[i].clockInPicUrl));
        }
        if (userCheckData[i].clockOutPicUrl) {
          imgLists.push(this.$options.filters['userCheckInfoImgUrl'](userCheckData[i].clockOutPicUrl));
        }
      }
      for (let i = 0; i <= index; i++) {
        if (!(i === index && type === "clockIn") && userCheckData[i].clockInPicUrl) {
          imgLists.push(this.$options.filters['userCheckInfoImgUrl'](userCheckData[i].clockInPicUrl));
        }
        if (!(i === index) && userCheckData[i].clockOutPicUrl) {
          imgLists.push(this.$options.filters['userCheckInfoImgUrl'](userCheckData[i].clockOutPicUrl));
        }
      }
      return imgLists;
    },
    getAllUserRoleInfo() {
      getAllUser(this.userQuery).then(resp => {
        const code = resp.code;
        const msg = resp.message;
        const datas = resp.datas.datas;
        if (code !== this.successCode) {
          return;
        }
        this.userRole = datas
      });
    },
    getAllUserCheck() {
      this.listQuery.param.startDate = this.queryDateTime[0];
      this.listQuery.param.endDate = this.queryDateTime[1];
      getAllUserCheckInfo(this.listQuery).then(resp => {
        console.log('请求成功');
        console.log(resp);
        this.userCheckInfos = resp.datas.datas;
        this.userCheckTotal = resp.datas.total;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getAllUserCheck();
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getAllUserCheck();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getAllUserCheck();
    }
  }
}
</script>